<template>
	<view class="t-login">
		<u-top-tips ref="uTips"></u-top-tips>
		<view class="t-b" v-show="isShow">{{ title }}</view>
		<form class="cl">
			<view v-show="isShow">
				<view class="t-a">
					<image class="img" src="@/static/img/email.png"></image>
					<input class="input" type="text" @blur="isEmail(form.email,tipList[0])" v-model="form.email"
						placeholder="请输入邮箱号" />
					<view class="t-c" @click="validate">
						{{ tips }}
						<u-verification-code :keep-running="true" :seconds="seconds" @end="end" @start="start"
							ref="uCode" @change="codeChange" :startText="startText" :changeText="changeText"
							:endText="endText"></u-verification-code>
					</view>
				</view>
				<view class="t-a">
					<image class="img" src="@/static/img/verify_code.png"></image>
					<input class="input" @blur="isCode(form.code,tipList[1])" type="digit" v-model="form.code"
						placeholder="请输入验证码" />
				</view>
				<view class="t-a">
					<image class="img" src="@/static/img/password.png"></image>
					<input class="input" @blur="isPassword(form.password,tipList[2])" v-model="form.password"
						type="password" placeholder="请输入6~18位的密码" />
				</view>
				<view class="t-a">
					<image class="img" src="@/static/img/password.png"></image>
					<input class="input" @blur="isNotEquals(form.password,towPassword,tipList[3])" v-model="towPassword"
						type="password" placeholder="确认密码" />
				</view>
			</view>
			<view v-show="!isShow" class="detail">
				<u-form :model="form" ref="uForm" style="margin: 0 20rpx;">
					<u-form-item label-width="145" label="*学号" prop="num">
						<u-input v-model="form.num" />
					</u-form-item>
					<u-form-item label-width="145" label="*姓名" prop="name">
						<u-input v-model="form.name" />
					</u-form-item>
					<u-form-item label-width="145" label="*电话" prop="phoneNumber">
						<u-input v-model="form.phoneNumber" />
					</u-form-item>
					<u-form-item label-width="145" label="*昵称" prop="nickname">
						<u-input v-model="form.nickname" />
					</u-form-item>
					<u-form-item label-width="145" label="*性别" prop="sex">
						<u-radio-group v-model="form.sex" @change="radioGroupChange1">
							<u-radio v-for="(item, index) in list1" :key="index" :name="item.value">
								{{ item.name }}
							</u-radio>
						</u-radio-group>
					</u-form-item>
					<view class="u-tips-color">教师角色需得到授权，请联系管理员</view>
					<u-form-item label-width="145" label="*角色" prop="role">
						<u-radio-group v-model="form.role" @change="radioGroupChange2">
							<u-radio v-for="(item, index) in list2" :key="item.id" :name="item.name">
								{{ item.name }}
							</u-radio>
						</u-radio-group>
					</u-form-item>
				</u-form>
			</view>
		</form>
		<button class="btn" form-type="submit" @tap="register">{{ btn }}</button>

		<view class="t-f" v-show="isShow">
			<u-checkbox @change="checkboxChange" v-model="check" size="20rpx" label-size="20rpx">
				同意<text>《用户协议》</text>和<text>《隐私政策》</text></u-checkbox>
		</view>
	</view>

</template>
<script>
	import {
		setToken,
		setUserInfo
	} from "../../common/auth";
	import {
		networkStatus
	} from "../../utils/chat_utils";
	import {
		TerminalType
	} from '../../utils/constants'

	export default {
		data() {
			return {
				title: '欢迎注册',
				towPassword: '',
				check: true,
				tips: '',
				seconds: 60,
				refCode: null,
				startText: '获取',
				changeText: 'X秒',
				endText: '重新获取',
				isShow: true,
				btn: '下一步',
				tipList: ["邮箱格式不合法！", "验证码格式不合法！", "密码格式不合法！", "两次密码不一致！"],
				form: {
					email: '1835698775@qq.com',
					password: '',
					num: '',
					name: '',
					sex: 1,
					phoneNumber: '',
					nickname: '',
					role: '学生',
					code: '',
					terminalType: ''
				},
				rules: {
					num: [{
						required: true,
						message: '学号不能为空',
						trigger: 'blur'
					}],
					name: [{
						required: true,
						message: '姓名不能为空',
						trigger: 'blur'
					}],
					phoneNumber: [{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// this.$u.test.mobile()就是返回true或者false的
							return this.$u.test.mobile(value);
						},
						required: true,
						message: '电话号码格式不合法',
						trigger: 'blur'
					}],
					nickname: [{
						required: true,
						message: '昵称不能为空',
						trigger: 'blur'
					}],
				},
				list1: [{
						name: '男',
						value: 1
					},
					{
						name: '女',
						value: 0
					},
				],
				list2: [{
						id: 99,
						name: '学生',
					},
					{
						id: 999,
						name: '教师',
					},
				]
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			networkStatus();
			this.$refs.uForm.setRules(this.rules);
			// #ifdef H5
			this.form.terminalType = TerminalType.WEB
			// #endif
			// #ifdef APP
			this.form.terminalType = TerminalType.MOBILE
			// #endif
			// #ifdef MP
			this.form.terminalType = TerminalType.APPLET
			// #endif
		},
		methods: {
			checkboxChange(obj) {
				this.check = obj.value;
			},
			checkForm() {
				if (!this.isPassword(this.form.password, this.tipList[2])) {
					return false;
				}
				if (!this.isNotEquals(this.towPassword, this.tipList[3])) {
					return false;
				}
				if (!this.isCode(this.form.code, this.tipList[1])) {
					return false;
				}
				return this.isEmail(this.form.email, this.tipList[0]);

			},
			register() {
				if (!this.check) {
					this.$u.toast("请勾选协议！");
					return;
				}
				if (this.isShow) {
					if (this.checkForm()) {
						this.$u.api.validateEmail(this.form.email, this.form.code).then(resp => {
							this.isShow = false;
							this.btn = "提交";
						})
					} else {
						this.$refs.uTips.show({
							title: '数据填写不合法，请检查后再提交！',
							type: 'info',
							duration: '3000'
						})
					}
				} else {
					this.$refs.uForm.validate(valid => {
						if (valid) {
							this.$u.api.register(this.form).then(res => {
								let user = res.data;
								setToken(user.token);
								user.token = '';
								setUserInfo(user)
								uni.$emit("setVuexUserInfo", {
									user: user,
									isLoginPage: true
								});
								uni.reLaunch({
									url: '../index/index',
									fail: (err) => {
										this.$u.toast('跳转出错');
									}
								})
							})
						}
					})
				}
			},
			validate() {
				if (!this.$u.test.email(this.form.email)) {
					this.$u.toast('邮箱格式不合法！');
					return;
				}
				if (this.$refs.uCode.canGetCode) {
					this.$u.api.getUserOne(this.form.email).then(resp => {
						if (!this.$u.test.isEmpty(resp.data)) {
							this.$refs.uTips.show({
								title: '该用户已存在，可直接进行登录！',
								type: 'info',
								duration: '3000'
							})
						} else {
							this.$u.api.senderEmailCode(this.form.email).then(resp => {
								// 通知验证码组件内部开始倒计时
								this.$refs.uCode.start();
							})
						}
					})
				} else {
					this.$u.toast('请等待倒计时结束！');
				}
			},
			codeChange(text) {
				this.tips = text;
			},
			start() {
				this.$u.toast('倒计时开始！');
			},
			end() {
				this.$u.toast('倒计时结束！');
			},

			// 选中任一radio时，由radio-group触发
			radioGroupChange1(e) {
				this.form.sex = e;
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange2(e) {
				this.form.role = e;
			},
			isNotEquals(v1, v2, tip) {
				if (v1 !== v2) {
					this.$u.toast(tip);
					return true;
				}
				return false;
			},
			isCode(v, tip) {
				if (!this.$u.test.code(v)) {
					this.$u.toast(tip);
					return false;
				}
				return true;
			},
			isEmail(v, tip) {
				if (!this.$u.test.email(v)) {
					this.$u.toast(tip);
					return false;
				}
				return true;
			},
			isPassword(v, tip) {
				if (v.length < 6 || v.length > 18) {
					this.$u.toast(tip);
					return false;
				}
				return true;
			}
		}
	}
</script>
<style lang="scss">
	.detail {
		margin-top: 50rpx;
	}

	.u-form {
		width: 600rpx;
		margin-left: 120rpx;
		font-size: 28rpx;
		color: #000;
	}

	.t-login {
		width: 600rpx;
		margin: 0 auto;
		font-size: 28rpx;
		color: #000;

		.btn {
			font-size: 28rpx;
			background: #000;
			color: #fff;
			height: 90rpx;
			line-height: 90rpx;
			border-radius: 50rpx
		}

		.input {
			padding: 0 20rpx 0 120rpx;
			height: 90rpx;
			line-height: 90rpx;
			margin-bottom: 50rpx;
			background: #f4f4f4;
			font-size: 28rpx;
			border-radius: 50rpx
		}

		.t-a {
			position: relative;

			.img {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				left: 40rpx;
				top: 28rpx;
				border-right: 2rpx solid #dedede;
				padding-right: 20rpx
			}

			.text {
				width: 110rpx;
				height: 40rpx;
				position: absolute;
				top: 28rpx;
				border-right: 2rpx solid #dedede;
				font-weight: bolder;
				padding-left: 20rpx;
			}
		}

		.t-b {
			text-align: center;
			font-size: 46rpx;
			color: #000;
			padding: 100rpx 0
		}

		.t-c {
			position: absolute;
			right: 22rpx;
			top: 22rpx;
			background: #000;
			color: #fff;
			font-size: 24rpx;
			border-radius: 50rpx;
			height: 50rpx;
			line-height: 50rpx;
			padding: 0 25rpx
		}

		.t-f {
			text-align: center;
			color: #999;
			margin-top: 50rpx;

			text {
				color: #2B85E4;
			}
		}

		.uni-input-placeholder {
			color: #000
		}
	}


	.cl:after {
		clear: both;
		display: flex;
		justify-content: space-between;
		visibility: hidden;
		height: 0;
		content: '\20'
	}
</style>
